<!-- eslint-disable vue/multi-word-component-names -->
// eslint-disable-next-line vue/multi-word-component-names
<!-- <template><Comment></Comment></template>
<script>
import Comment from "@/components/common/Comment.vue";
export default {
	// import Comment from "src\components\common\Comment.vue";
	// eslint-disable-next-line vue/multi-word-component-names
	name: "Footer",
	comments: {
		Comment,
	},
	props: {
		webSiteInfo: {
			type: Object,
		},
	},
};
</script>
<style scoped></style> -->
<!-- 
<template>
	<div id="app">
		<div class="comment-form">
			<textarea v-model="newusername" placeholder="请输入昵称"></textarea>
			<textarea v-model="newComment" placeholder="请输入评论"></textarea>
			<button @click="addComment, addusername">提交评论</button>
		</div>
		<div class="comment-list">
			<div v-for="(username, index) in comments" :key="index">
				<p>{{ username }}</p>
			</div>
			<div v-for="(comment, index) in comments" :key="index">
				<p>{{ username }}{{ comment }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			newusername: "",
			newComment: "",
			comments: [],
		};
	},
	methods: {
		addusername() {
			if (this.username.trim() !== "") {
				this.username.push(this.newusername);
				this.newusername = "";
			}
		},
		addComment() {
			if (this.newComment.trim() !== "") {
				this.comments.push(this.newComment);
				this.newComment = "";
			}
		},
	},
};
</script> -->
<template>
	<div id="app">
		<div class="form-container">
			<h2>评论</h2>
			<form @submit.prevent="submitForm">
				<div>
					<label for="username">用户名：</label>
					<input type="text" id="username" v-model="username" required />
				</div>
				<br />
				<div>
					<label for="comment">评论：</label>
					<textarea id="comment" v-model="comment" required></textarea>
				</div>
				<button type="submit">提交</button>
			</form>
		</div>
		<div class="comment-list">
			<div v-for="(comment, index) in comments" :key="index">
				<p>{{ comment.username }}：{{ comment.content }}</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			username: "",
			comment: "",
			comments: [],
		};
	},
	methods: {
		submitForm() {
			this.comments.push({ username: this.username, content: this.comment });
			this.username = "";
			this.comment = "";
		},
	},
};
</script>
